<template>
    <div class="pShow">
        <!-- <el-breadcrumb separator="/" class="tpro">
            <el-breadcrumb-item :to="{ path: '/index/pShow'}" class="plist">商品列表</el-breadcrumb-item>
        </el-breadcrumb> -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <!-- 分类展示 -->
            <nav>
                <el-submenu index="1">
                    <template slot="title">
                        <router-link to="" class="proTitle">文学艺术</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(1)">小说</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(2)">艺术</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <router-link to="" class="proTitle">人文社科</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(3)">历史</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(4)">法律</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(5)">心理</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <router-link to="" class="proTitle">少儿童书</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(6)">儿童文学</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(7)">动漫绘本</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(8)">启蒙益智</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(9)">技能培养</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <router-link to="" class="proTitle">教育考试</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(10)">中小教辅</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(11)">字典词典</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <router-link to="" class="proTitle">生活休闲</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(12)">时尚娱乐</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(13)">养生保健</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <router-link to="" class="proTitle">经济金融</router-link>
                    </template>
                    <el-menu-item class="subKind" @click="classify(14)">管理</el-menu-item>
                    <el-menu-item class="subKind" @click="classify(15)">经济</el-menu-item>
                </el-submenu>
            </nav>

            <!-- 模糊搜索 -->
            <div class="search-box">
                <el-input placeholder="请输入名称" v-model="inputVal" clearable size="small"
                    style="width: 300px; height: 30px"></el-input>
                <el-button icon="el-icon-search" type="primary" size="small" @click="search"
                    style="margin: 0 10px 0 10px; height: 30px"></el-button>
            </div>
        </el-menu>
        <br>
        <el-divider></el-divider>
        <div class="main">
            <!-- 分类结果 -->
            <div class="mainBox" style="height: auto;" v-if="selectList.length > 0">
                <p class="jingXuan"> {{ this.tempType }}:</p>
                <!-- 分页 -->
                <div class="newPagingStyle" v-if="currentPageData.length > 0">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="1" :page-size="12"
                        layout="total, prev, pager, next, jumper" :total="selectList.length">
                    </el-pagination>
                </div>
                <ul class="jingXuanList">
                    <li v-for="item in currentPageData" @click="goDetail(item.id)">
                        <div class="liBox">
                            <div class="imgBox">
                                <img :src="item.imgPath" class="image">
                            </div>
                            <p>&nbsp;&nbsp;&nbsp;{{ item.productName }}</p>
                            <p style="color: #ff2832">&nbsp;&nbsp;&nbsp;￥{{ item.price }}</p>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="goDetail(item.id)">查看详情</el-button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 搜索结果 -->
            <div class="mainBox" style="height: auto;" v-if="isShowSearch">
                <p class="jingXuan">搜索结果:</p>
                <p v-if="searchResult.length < 1">搜索结果为空！</p>
                <ul class="jingXuanList">
                    <li v-for="item in searchResult" @click="goDetail(item.id)">
                        <div class="liBox">
                            <div class="imgBox">
                                <img :src="item.imgPath" class="image">
                            </div>
                            <p>&nbsp;&nbsp;&nbsp;{{ item.productName }}</p>
                            <p style="color: #ff2832">&nbsp;&nbsp;&nbsp;￥{{ item.price }}</p>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="goDetail(item.id)">查看详情</el-button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 今日精选 -->
            <div class="mainBox">
                <p class="jingXuan">今日精选:</p>
                <ul class="jingXuanList">
                    <li v-for="(product, index) in jingXuanList" :key="product.id" @click="goDetail(product.id)">
                        <div class="liBox">
                            <div class="imgBox">
                                <img :src="product.imgPath" class="image">
                            </div>
                            <p>&nbsp;&nbsp;&nbsp;{{ product.productName }}</p>
                            <p style="color: #ff2832">&nbsp;&nbsp;&nbsp;￥{{ product.price }}</p>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 猜你喜欢 -->
            <div class="mainBox" style="height: auto;">
                <p class="jingXuan">猜你喜欢:</p>
                <ul class="jingXuanList">
                    <li v-for="(product, index) in guessLike" :key="product.id" @click="goDetail(product.id)">
                        <div class="liBox">
                            <div class="imgBox">
                                <img :src="product.imgPath" class="image">
                            </div>
                            <p>&nbsp;&nbsp;&nbsp;{{ product.productName }}</p>
                            <p style="color: #ff2832">&nbsp;&nbsp;&nbsp;￥{{ product.price }}</p>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <FooterView></FooterView>
    </div>
</template>
<script src="../assets/js/ProductShowView.js"></script>
<style src="../assets/css/ProductShowView.css" scoped></style>